/* eslint-disable no-unused-vars */
/* eslint-disable react/no-unused-state */
import React, { PureComponent } from 'react';
import moment from 'moment';
import router from 'umi/router';
import { connect } from 'dva';
import { DownOutlined, UpOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Alert,
  Card,
  Button,
  Modal,
  Input,
  Select,
  Row,
  Col,
  message,
  DatePicker,
  Menu,
  Dropdown,
  Tabs,
  Spin,
  Divider,
  Progress,
  Tooltip,
} from 'antd';
import _ from 'lodash';
import queryString from 'query-string';
import StandardTable from '@/components/StandardTable';
import styles from '@/utils/utils.less';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; // 引入头部组件
import downloadFile, { cusSome, getProPagination } from '@/utils/utils';
import Authorized from '@/utils/Authorized';
import { checkPermissions } from '@/utils/authority';
import ProTable from '@/pages/components/Problem/ProblemPage/ProTable';
import ProModal from '@/pages/components/Problem/ProblemPage/ProModal';
import ProExportBtn from '@/pages/components/Problem/ProblemPage/ProExportBtn';
import HOCSelect from '@/components/AntDesign/Select';
import SearchAccoListOs from '../../components/SearchAccoListOs';
import DeclareModal from '../../components/DeclareModal';
import Customer from '../../components/Customer';
import SearchPersonEs from '../../components/SearchPersonEs';
import BatchTaskProgress from '../../components/BatchTaskProgress';
import BigwareList from '../Bigwarelist';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Option } = Select;
const { TextArea } = Input;
const { TabPane } = Tabs;
const { confirm } = Modal;

@connect(({ addempaccu,accuware, publicdata, loading, login, addaccubatch }) => ({
  addempaccu,
  publicdata,
  loading: loading.models.addempaccu,
  login,
  addaccubatch,
  bigwareList: accuware.bigwareList,
  listLoading: loading.effects['accuware/fetchBigwareList'],
}))
@Form.create()
class AddEmpAccuList extends PureComponent {
  state = {
    visible2: false,
    // 问题人员
    proVisible: false,
    fetching: false,
    decExcelVisible: false,
    mode: ['month', 'month'],
    selectedRows: [],
    selectedKeys: [],
    // confirmLoading: false,
    // excelLoading: false,
    accoOwnerFlag: false,
  };

  componentDidMount() {
    const {
      location,
      activeKey,
      dispatch,
      addempaccu: {
        pageData: { pagination },
      },
      login: { baseUser },
    } = this.props;
    const { isMenuLink } = queryString.parse(location.search);
    const tempActiveKey = queryString.parse(location.search).activeKey || activeKey;
    dispatch({
      type: 'addempaccu/updateModelData',
      payload: {
        activeKey: tempActiveKey,
      },
    });
    const proPagination = getProPagination(tempActiveKey, '5', pagination);
    if (isMenuLink) {
      this.resetAndGeLlist(location);
    } else {
      this.getList(tempActiveKey, proPagination.current, proPagination.pageSize);
    }
    this.getDefaultLibrary();
    dispatch({
      type: 'addempaccu/fetchDictList',
      payload: {},
    });
    this.setState({ accoOwnerFlag: baseUser.postType === 2 });
  }


  componentWillUnmount() {
    const { interval } = this.state;
    clearInterval(interval);
  }

  // 查询是否都设置了默认大库
  getDefaultLibrary = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'addempaccu/fetchSuppList',
      payload: {},
    });
  };

  // 查詢
  getList(activeKey = '1', currentPage = 1, pageSizes = 10, queryParam, isClear = true) {
    const { form, dispatch } = this.props;
    if (isClear) {
      this.setState({ selectedKeys: [], selectedRows: [] });
    }
    form.validateFieldsAndScroll(
      [
        'accuAccoName',
        'certNo',
        'custId',
        'declAreaId',
        'empName',
        'matState',
        'payWay',
        'timeDate',
        'creId',
        'curMthDeclFlag',
        'declWay',
        'operTime',
        'accoRespId',
        'accuAccoId'
      ],
      (err, fieldsData) => {
        const fieldsValue = queryParam || fieldsData;
        dispatch({
          type: 'addempaccu/updateModelData',
          payload: { formFieldsValue: fieldsValue, activeKey },
        });
        if (err) return;
        const tempFields = {};
        Object.keys(fieldsValue).forEach(key => {
          if (key === 'timeDate') {
            tempFields.startDate =
              fieldsValue.timeDate && fieldsValue.timeDate[0].format('YYYY-MM-01');
            tempFields.endDate =
              fieldsValue.timeDate && fieldsValue.timeDate[1].format('YYYY-MM-01');
          } else if (key === 'operTime') {
            tempFields.operBeginDate = fieldsValue.operTime && fieldsValue.operTime[0].valueOf();
            tempFields.operEndDate = fieldsValue.operTime && fieldsValue.operTime[1].valueOf();
          } else if (key === 'curMthDeclFlag' || key === 'declWay') {
            tempFields.curMthDeclFlag =
              Number(activeKey) === 1 ? fieldsValue.curMthDeclFlag : undefined;
            tempFields.declWay = Number(activeKey) === 2 ? fieldsValue.declWay : undefined;
          } else {
            tempFields[key] =
              fieldsValue[key] === undefined || fieldsValue[key] === null
                ? null
                : fieldsValue[key].trim();
          }
          tempFields[key] = tempFields[key] === undefined ? null : tempFields[key];
          delete tempFields.timeDate;
          delete tempFields.operTime;
        });
        dispatch({
          type: 'addempaccu/updateModelData',
          payload: {
            copyAll: { ...tempFields, execStep: activeKey },
          },
        });
        if (Number(activeKey) === 5) {
          const params = {
            ...tempFields,
            execStep: 5,
            busiType: 16,
          };
          setTimeout(() => {
            const { proTable } = this.state;
            const proFormFieldsValue = { ...params };
            dispatch({
              type: 'addempaccu/updateModelData',
              payload: {
                proFormFieldsValue,
              },
            });
            if (proTable.searchList) {
              proTable.searchList(proFormFieldsValue, currentPage, pageSizes);
            }
          });
        } else {
          dispatch({
            type: 'addempaccu/fetchList',
            payload: {
              ...tempFields,
              execStep: activeKey,
              currentPage,
              pageSizes,
            },
          });
        }
      }
    );
  }

 // 获取大库列表
 onSearch = value => {
  const { dispatch } = this.props;
  if (value.trim().length) {
    dispatch({
      type: 'accuware/fetchBigwareList',
      payload: { accoName: value.trim() },
    });
  }
};

  handleStandardTableChange = pagination => {
    const {
      addempaccu: { activeKey },
    } = this.props;
    this.getList(activeKey, pagination.current, pagination.pageSize, undefined, false);
  };

  handleSelectRows = (selectedRows, selectedKeys) => {
    const newRows = _.cloneDeep(selectedRows);
    const newKeys = _.cloneDeep(selectedKeys);
    this.setState({ selectedRows: newRows, selectedKeys: newKeys });
  };

  // 地区
  changeArea = value => {
    const { dispatch } = this.props;
    this.setState({ fetching: true });
    dispatch({
      type: 'addempaccu/changeArea',
      payload: { areaName: value },
    });
  };

  tabChange = activeKey => {
    const { form } = this.props;

    router.push({
      pathname: '/providentfundmanagement/accurecruition/index',
      query: {
        activeKey,
      },
    });
    form.setFieldsValue({
      curMthDeclFlag: '1',
      declWay: '0',
    });
    this.setState({ selectedRows: [] }, () => {
      this.getList(activeKey);
    });
  };

  onFlagcurMth = () => {
    const {
      addempaccu: { activeKey },
    } = this.props;
    setTimeout(() => {
      this.getList(activeKey);
    }, 0);
  };

  onExecState = () => {
    const {
      addempaccu: {
        activeKey,
        pageData: { pagination },
      },
    } = this.props;
    setTimeout(() => {
      this.getList(activeKey, pagination.current, pagination.pageSize);
    }, 0);
  };

  onTimeChange = () => {};

  onTimeChanges = value => {
    const { form } = this.props;
    form.setFieldsValue({
      timeDate: value,
    });
  };

  // 重置
  resetSearch = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    form.setFieldsValue({ operTime: null, timeDate: null });
    dispatch({
      type: 'addempaccu/updateModelData',
      payload: { formFieldsValue: {} },
    });
  };

  // 大库申报
  bigApply = () => {
    const { dispatch } = this.props;
    const { selectedRows, selectedKeys } = this.state;
    const tempArr = [];
    selectedRows.map(value => {
      tempArr.push(value.addDetId);
      return true;
    });
    confirm({
      title: (
        <div>
          是否对当前列表<span className="emphasize-text">{selectedKeys.length}</span>
          条数据进行网上申报？
        </div>
      ),
      icon: <QuestionCircleOutlined />,
      okText: '是',
      cancelText: '否',
      onOk: () => {
        const tempArr2 = [];
        selectedRows.forEach(item => {
          const obj = {};
          obj.addDetId = item.addDetId;
          obj.vno = item.vno;
          tempArr2.push(obj);
        });
        dispatch({
          type: 'addempaccu/onLineDecl',
          payload: { accuAddDets: tempArr2 },
        }).then(() => {
          this.setState({ selectedKeys: [], selectedRows: [] });
        });
      },
    });
  };

  // 选中城市
  changeAreacode = () => {
    this.setState({
      // declAreaId: value.key,
    });
  };

  singleApply = () => {
    const tempArr = [];
    const { dispatch } = this.props;
    const { selectedRows } = this.state;
    selectedRows.map(value => {
      tempArr.push({
        addDetId: value.addDetId,
        vno: value.vno,
      });
      return true;
    });
    confirm({
      title: (
        <div>
          是否对当前列表<span className="emphasize-text">{selectedRows.length}</span>
          条数据进行网上申报？
        </div>
      ),
      icon: <QuestionCircleOutlined />,
      okText: '是',
      cancelText: '否',
      onOk: () => {
        dispatch({
          type: 'addempaccu/onLineDecl',
          payload: { accuAddDets: tempArr },
        }).then(() => {
          this.setState({ selectedKeys: [], selectedRows: [] });
        });
      },
      onCancel: () => {},
    });
  };

  // 网上申报  开通自动申报之后
  onLineDecl = () => {
    const {
      addempaccu: {
        defaultLibrary,
        activeKey,
        pageData: { list },
        copyAll,
      },
      dispatch,
    } = this.props;
    if (Number(activeKey) === 1 && defaultLibrary) {
      message.error('业务范围维护的地区增加了政策组，请先维护该地区的政策组默认大库后再申报。');
    } else {
      const { selectedRows } = this.state;
      if (selectedRows && selectedRows.length > 0) {
        if (cusSome(selectedRows, 'probFlag', 1)) {
          message.error('问题人员无法做相关操作');
        } else {
          const statusArr = [];
          selectedRows.map(item => {
            statusArr.push(item.payWay);
            return true;
          });
          if (statusArr.indexOf(1) < 0) {
            this.bigApply(); // 大库
          } else if (statusArr.indexOf(2) < 0) {
            this.singleApply(); // 单立户
          } else {
            this.bigApply(); // 大库
          }
        }
      } else if (list.length > 0) {
        confirm({
          title: '是否对当前列表全部数据进行网上申报？',
          icon: <QuestionCircleOutlined />,
          okText: '是',
          cancelText: '否',
          onOk: () => {
            dispatch({
              type: 'addempaccu/onLineDecl',
              payload: copyAll,
            }).then(() => {
              this.setState({ selectedKeys: [], selectedRows: [] });
            });
          },
          onCancel() {},
        });
      }
    }
  };

  offBigApply = () => {
    const tempArr = [];
    const {
      addempaccu: {
        activeKey,
        pageData: { pagination },
      },
      dispatch,
    } = this.props;
    const { selectedRows, selectedKeys } = this.state;
    selectedRows.map(value => {
      tempArr.push(value.addDetId);
      return true;
    });
    // const that = this;
    confirm({
      title: (
        <div>
          是否对当前列表<span className="emphasize-text">{selectedKeys.length}</span>
          条数据进行线下申报？
        </div>
      ),
      icon: <QuestionCircleOutlined />,
      okText: '是',
      cancelText: '否',
      onOk: () => {
        const temp = [];
        selectedRows.forEach(item => {
          const obj = {};
          obj.addDetId = item.addDetId;
          obj.vno = item.vno;
          temp.push(obj);
        });
        dispatch({
          type: 'addempaccu/underLineDecl',
          payload: { accuAddDets: temp },
        }).then(res => {
          this.setState({ selectedKeys: [], selectedRows: [] });
          if (res.data && res.data.declErrMessage) {
            const { declErrMessage } = res.data;
            this.showDownLoadDeclErr(declErrMessage.declErrCount, declErrMessage.accuDeclErrList);
            this.getList(activeKey, pagination.current, pagination.pageSize);
          }
        });
      },
      onCancel: () => {},
    });
  };

  offSingleApply = () => {
    const {
      addempaccu: {
        activeKey,
        pageData: { pagination },
      },
      dispatch,
    } = this.props;
    const { selectedRows } = this.state;
    const tempArr = [];
    selectedRows.map(value => {
      tempArr.push({
        addDetId: value.addDetId,
        vno: value.vno,
      });
      return true;
    });
    confirm({
      title: (
        <div>
          是否对当前列表<span className="emphasize-text">{selectedRows.length}</span>
          条数据进行线下申报？
        </div>
      ),
      icon: <QuestionCircleOutlined />,
      okText: '是',
      cancelText: '否',
      onOk: () => {
        dispatch({
          type: 'addempaccu/underLineDecl',
          payload: {
            accuAddDets: tempArr,
          },
        }).then(res => {
          this.setState({ selectedKeys: [], selectedRows: [] });
          if (res.data && res.data.declErrMessage) {
            const { declErrMessage } = res.data;
            this.showDownLoadDeclErr(declErrMessage.declErrCount, declErrMessage.accuDeclErrList);
            this.getList(activeKey, pagination.current, pagination.pageSize);
          }
        });
      },
      onCancel: () => {},
    });
  };

  // 线下申报错误下载
  showUnderDownDeclErr = (count, batNo) => {
    Modal.warning({
      title: (
        <Row>
          <Row>
            当前存在<span className="emphasize-text">{count}条</span>数据不可申报，请下载查看。
          </Row>
          <a
            onClick={() =>
              this.download('/osApi/accuAddDet/syncAccuAddUnderLineDeclErrMessage', { batNo })
            }
          >
            下载
          </a>
        </Row>
      ),
      okText: '关闭',
      okType: 'default',
      autoFocusButton: 'cancel',
    });
  };

  // 线下申报
  showConfirm = () => {
    const {
      addempaccu: {
        activeKey,
        defaultLibrary,
        pageData: { list, pagination },
        copyAll,
      },
      dispatch,
    } = this.props;
    const { selectedRows } = this.state;
    if (Number(activeKey) === 1 && defaultLibrary) {
      message.warning('业务范围维护的地区增加了政策组，请先维护该地区的政策组默认大库后再申报。');
    } else if (selectedRows && selectedRows.length > 0) {
      if (cusSome(selectedRows, 'probFlag', 1)) {
        message.error('问题人员无法做相关操作');
      } else {
        const statusArr = [];
        selectedRows.map(item => {
          statusArr.push(item.payWay);
          return true;
        });
        if (statusArr.indexOf(1) < 0) {
          this.offBigApply(); // 大库
        } else if (statusArr.indexOf(2) < 0) {
          this.offSingleApply(); // 单立户
        } else {
          this.offBigApply(); // 大库
        }
      }
    } else if (list.length > 0) {
      confirm({
        title: '是否对当前列表全部数据进行线下申报？',
        okText: '是',
        cancelText: '否',
        icon: <QuestionCircleOutlined />,
        onOk: () => {
          dispatch({
            type: 'addempaccu/underLineDecl',
            payload: copyAll,
          }).then(res => {
            this.setState({ selectedKeys: [], selectedRows: [] });
            if (res.data && res.data.declErrMessage) {
              const { declErrMessage } = res.data;
              this.showDownLoadDeclErr(declErrMessage.declErrCount, declErrMessage.accuDeclErrList);
              this.getList(activeKey, pagination.current, pagination.pageSize);
            }
          });
        },
        onCancel() {},
      });
    }
  };

  // 取消标记问题人员
  signProcanel = (id, vno) => {
    const {
      addempaccu: {
        activeKey,
        pageData: { pagination },
      },
      dispatch,
    } = this.props;
    const arr = [];
    const obj1 = {};
    const obj = {};
    obj1.addDetId = id;
    obj1.vno = vno;
    arr.push(obj1);

    obj.accuAddDets = arr;
    obj.addDetId = id;
    obj.probFlag = 2;
    confirm({
      title: '是否确定取消标记问题人员？',
      icon: <QuestionCircleOutlined />,
      onOk: () => {
        dispatch({
          type: 'addempaccu/signProcanel',
          payload: obj,
        }).then(res => {
          if (res.success === true) {
            this.getList(activeKey, pagination.current, pagination.pageSize);
          }
        });
      },
      okText: '确认',
      cancelText: '取消',
      onCancel() {},
    });
  };

  // 标记问题人员
  signPro = () => {
    const { selectedRows } = this.state;
    if (selectedRows.length) {
      if (cusSome(selectedRows, 'probFlag', 1)) {
        message.warning('问题人员无法做相关操作');
      } else {
        this.setState({
          proVisible: true,
        });
      }
    } else {
      message.warning('请选择至少一条记录');
    }
  };

  proHandleOk = () => {
    const {
      addempaccu: {
        activeKey,
        pageData: { pagination },
      },
    } = this.props;
    this.setState({
      proVisible: false,
    });
    this.getList(activeKey, pagination.current, pagination.pageSize);
  };

  handleCancelPro = () => {
    this.setState({
      proVisible: false,
    });
  };

  // 问题反馈
  textChange = () => {};

  textChangeR = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'addempaccu/updateModelData',
      payload: {
        textR: e.target.value,
      },
    });
  };

  // 标记申报成功
  handleOkSuc = () => {
    const { selectedRows } = this.state;
    const {
      addempaccu: {
        activeKey,
        pageData: { pagination },
      },
      dispatch,
    } = this.props;
    if (selectedRows.length) {
      if (cusSome(selectedRows, 'probFlag', 1)) {
        message.warning('问题人员无法做相关操作');
      } else {
        const arr = [];
        const obj = {};
        selectedRows.map(item => {
          const obj1 = {};
          obj1.addDetId = item.addDetId;
          obj1.vno = item.vno;
          arr.push(obj1);
          return true;
        });
        obj.accuAddDets = arr;
        // 执行结果
        const confirmReference = confirm({
          title: (
            <div>
              是否对当前列表<span className="emphasize-text">{selectedRows.length}</span>
              条数据标记申报成功？
            </div>
          ),
          icon: <QuestionCircleOutlined />,
          okText: '是',
          cancelText: '否',
          onCancel: () => {},
          onOk: () => {
            confirmReference.update({
              okButtonProps: { loading: true },
            });
            // return new Promise(resolve => {
            //   dispatch({
            //     type: 'addempaccu/handleOkSuc',
            //     payload: obj,
            //   }).then(res => {
            //     if (res.success === true) {
            //       message.success('操作成功');
            //       this.getList(activeKey, pagination.current, pagination.pageSize);
            //     } else {
            //       message.warning(res.message || '服务端错误');
            //       this.getList(activeKey, pagination.current, pagination.pageSize);
            //     }
            //     resolve();
            //   });
            // });
            // 走socket异步
            dispatch({
              type: 'addaccubatch/uploadFileWithProgress',
              payload: {
                params: {
                  ...obj,
                },
                type: '1',
              },
            });
          },
        });
      }
    } else {
      message.warning('请选择至少一条记录');
    }
  };

  // 进度弹框显隐
  handleProgressModalVisible = flag => {
    const {
      addempaccu: {
        activeKey,
        pageData: { pagination },
      },
      dispatch,
    } = this.props;
    if (!flag) {
      dispatch({
        type: 'addaccubatch/updateModelData',
        payload: {
          showProgress: false,
        },
      });
      this.getList(activeKey, pagination.current, pagination.pageSize);
    }
  };

  // 标记申报失败
  handleOkFail = () => {
    const {
      addempaccu: {
        activeKey,
        pageData: { pagination },
      },
      dispatch,
    } = this.props;
    const { selectedRows } = this.state;
    if (selectedRows.length) {
      if (cusSome(selectedRows, 'probFlag', 1)) {
        message.error('问题人员无法做相关操作');
      } else {
        confirm({
          title: (
            <div>
              是否对当前列表<span className="emphasize-text">{selectedRows.length}</span>
              条数据标记申报失败？
            </div>
          ),
          icon: <QuestionCircleOutlined />,
          okText: '是',
          cancelText: '否',
          onCancel: () => {},
          onOk: () => {
            const arr = [];
            const obj = {};
            selectedRows.map(item => {
              const obj1 = {};
              obj1.addDetId = item.addDetId;
              obj1.vno = item.vno;
              arr.push(obj1);
              return true;
            });
            obj.accuAddDets = arr;
            // 执行结果
            dispatch({
              type: 'addempaccu/handleOkFail',
              payload: obj,
            }).then(res => {
              if (res.success === true) {
                message.success('操作成功');
                this.getList(activeKey, pagination.current, pagination.pageSize);
              } else {
                message.warning(res.message || '服务端错误');
              }
            });
          },
        });
      }
    } else {
      message.warning('请选择至少一条记录');
    }
  };

  // 取消申报
  cancleApply = () => {
    const { selectedRows } = this.state;
    const {
      addempaccu: {
        activeKey,
        pageData: { pagination },
      },
      dispatch,
    } = this.props;
    if (selectedRows.length) {
      if (cusSome(selectedRows, 'probFlag', 1)) {
        message.warning('问题人员无法做相关操作');
      } else {
        const arr = [];
        const obj = {};
        selectedRows.map(item => {
          const obj1 = {};
          obj1.addDetId = item.addDetId;
          obj1.vno = item.vno;
          arr.push(obj1);
          return true;
        });
        obj.accuAddDets = arr;
        obj.execStep = activeKey;
        confirm({
          title: (
            <div>
              是否对当前列表<span className="emphasize-text">{selectedRows.length}</span>
              条数据进行取消申报？
            </div>
          ),
          icon: <QuestionCircleOutlined />,
          onOk: () => {
            // dispatch({
            //   type: 'addempaccu/cancleApply',
            //   payload: obj,
            // }).then(res => {
            //   if (res.success === true) {
            //     this.getList(activeKey, pagination.current, pagination.pageSize);
            //   }
            // });
            // 改为异步socket
            dispatch({
              type: 'addaccubatch/uploadFileWithProgress',
              payload: {
                params: {
                  ...obj,
                },
                type: '2',
              },
            });
          },
          okText: '是',
          cancelText: '否',
          onCancel() {},
        });
      }
    } else {
      message.warning('请选择至少一条记录');
    }
  };

  // 办理备注
  addRemark = record => {
    const { dispatch } = this.props;
    dispatch({
      type: 'addempaccu/updateModelData',
      payload: {
        textR: '',
      },
    });
    this.setState({
      remarkVisible: true,
      busiId: record.addDetId,
      sendId: record.sendId,
      taskId: record.taskId,
    });
  };

  // 办理备注Ok
  remarkOk = () => {
    const {
      addempaccu: {
        activeKey,
        textR,
        pageData: { pagination },
      },
      dispatch,
    } = this.props;
    const obj = {};
    const { busiId, sendId, taskId } = this.state;
    obj.busiId = busiId;
    obj.content = textR;
    obj.sendId = sendId;
    obj.taskId = taskId;
    // 执行结果
    dispatch({
      type: 'addempaccu/remarkOk',
      payload: obj,
    }).then(res => {
      if (res.success === true) {
        this.setState({
          remarkVisible: false,
        });
        this.getList(activeKey, pagination.current, pagination.pageSize);
      }
    });
  };

  remarkCancel = () => {
    this.setState({
      remarkVisible: false,
    });
  };

  // 下载
  download = (url, param) => {
    downloadFile(param, url, 'POST');
  };

  // 材料下载
  materialDownload = () => {
    const {
      addempaccu: {
        // activeKey,
        pageData: { list },
        copyAll,
      },
    } = this.props;
    const { selectedRows } = this.state;
    if (!selectedRows || selectedRows.length === 0) {
      if (list.length > 0) {
        confirm({
          title: '是否对当前列表全部数据进行材料下载？',
          okText: '是',
          icon: <QuestionCircleOutlined />,
          cancelText: '否',
          onOk: () => {
            this.download('/osApi/accuAddDet/downloadMatsZip', copyAll);
          },
          onCancel() {},
        });
      }
    } else {
      confirm({
        title: (
          <div>
            是否对当前列表<span className="emphasize-text">{selectedRows.length}</span>
            条数据进行材料下载？
          </div>
        ),
        icon: <QuestionCircleOutlined />,
        okText: '是',
        cancelText: '否',
        onOk: () => {
          const addDetIds = [];
          selectedRows.map(value => {
            addDetIds.push(value.addDetId);
            return true;
          });
          const objAll = {
            addDetIds,
            ...copyAll,
          };
          this.download('/osApi/accuAddDet/downloadMatsZip', objAll);
        },
        onCancel() {},
      });
    }
  };

  // 申报明细表导出  弹框  确定
  matDownload = () => {
    const {
      form,
      addempaccu: { declDetailIds, copyAll },
    } = this.props;
    const { selectedRows } = this.state;
    form.validateFieldsAndScroll(err => {
      if (!err) {
        const addDet = [];
        if (selectedRows.length > 0) {
          selectedRows.map(value => {
            addDet.push(value.addDetId);
            return true;
          });
        }
        const objAll = {
          declDetailIds,
          addDetIds: addDet,
          ...copyAll,
        };
        this.download('/osApi/accuAddDet/downloadDeclDetAccuAddImport', objAll);
      }
    });
  };

  // 申报明细表数据选择
  scheduleChange = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'addempaccu/updateModelData',
      payload: {
        declDetailIds: e,
      },
    });
  };

  goProgress = () => {
    router.push('/providentfundmanagement/accurecruition/progress');
  };

  batchFeedback = () => {
    router.push('/providentfundmanagement/accurecruition/batchFeedback?busiType=16');
  };

  // 批量修改
  batchModify = () => {
    router.push('/providentfundmanagement/accurecruition/batchModify');
  };

  linkRoute = (id, path) =>
    id
      ? router.push(`/providentfundmanagement/accurecruition/${path}?id=${id}`)
      : router.push(`/providentfundmanagement/${path}`);

  // 导出
  exportExcel = () => {
    const {
      addempaccu: { formFieldsValue },
    } = this.props;
    const { selectedKeys } = this.state;
    const obj = {
      ...formFieldsValue,
      busiType: 16,
      detIds: selectedKeys,
    };
    if (selectedKeys.length) {
      // this.setState({ excelLoading: true });
      downloadFile(obj, '/osApi/problem/accu/export', 'POST', () => {
        // this.setState({ excelLoading: false });
      });
    } else {
      confirm({
        title: '请选择数据，如不选择，默认导出当前条件下所有数据！',
        okText: '导出',
        cancelText: '取消',
        icon: <QuestionCircleOutlined />,
        onOk: () => {
          downloadFile(obj, '/osApi/problem/accu/export', 'POST');
        },
      });
    }
  };

  // 导出excel
  exportData = () => {
    const {
      addempaccu: {
        activeKey,
        pageData: { list },
        copyAll,
      },
    } = this.props;
    const { selectedRows } = this.state;
    if (!selectedRows || selectedRows.length === 0) {
      if (list.length > 0) {
        confirm({
          title: '是否对当前列表全部数据进行导出？',
          okText: '是',
          cancelText: '否',
          icon: <QuestionCircleOutlined />,
          onOk: () => {
            switch (activeKey) {
              case '1':
                this.download('/osApi/accuAddDet/expAccuAddToDecl', copyAll);
                break;
              case '2':
                this.download('/osApi/accuAddDet/expAccuAddToDecling', copyAll);
                break;
              case '3':
                this.download('/osApi/accuAddDet/expAccuAddToDecled', copyAll);
                break;
              default:
                break;
            }
            
          },
          onCancel() {},
        });
      }
    } else {
      confirm({
        title: (
          <div>
            是否对当前列表<span className="emphasize-text">{selectedRows.length}</span>
            条数据进行导出？
          </div>
        ),
        icon: <QuestionCircleOutlined />,
        okText: '是',
        cancelText: '否',
        onOk: () => {
          const addDetIds = [];
          selectedRows.map(value => {
            addDetIds.push(value.addDetId);
            return true;
          });
          const objAll = {
            addDetIds,
            ...copyAll,
          };
          switch (activeKey) {
            case '1':
              this.download('/osApi/accuAddDet/expAccuAddToDecl', objAll);
              break;
            case '2':
              this.download('/osApi/accuAddDet/expAccuAddToDecling', objAll);
              break;
            case '3':
              this.download('/osApi/accuAddDet/expAccuAddToDecled', objAll);
              break;
            default:
              break;
          }
        },
        onCancel() {},
      });
    }
  };

  // 查询表格布局
  toggleForm = () => {
    const { addempaccu, dispatch } = this.props;
    dispatch({
      type: 'addempaccu/updateModelData',
      payload: { expandForm: !addempaccu.expandForm },
    });
  };

  // 申报明细表导出
  declareExport = () => {
    const {
      addempaccu: {
        activeKey,
        pageData: { list },
        copyAll,
      },
      dispatch,
    } = this.props;
    const { selectedKeys } = this.state;
    const declWay = Number(activeKey) === 2 ? 2 : undefined;
    if (list.length > 0) {
      dispatch({
        type: 'addempaccu/updateModelData',
        payload: {
          downParam: {
            addDetIds: selectedKeys,
            ...copyAll,
            declWay,
          },
        },
      });
      this.setState(
        {
          declWay,
        },
        () => {
          this.getDeclList(1, 5);
        }
      );
    } else {
      message.warning('无查询结果，不可导出！');
    }
  };

  pageChange = (current, pageSizes) => {
    this.getDeclList(current, pageSizes);
  };

  pageSizeChange = (current, pageSizes) => {
    this.getDeclList(current, pageSizes);
  };

  getDeclList = (currentPage, pageSize) => {
    const {
      dispatch,
      addempaccu: { copyAll },
    } = this.props;
    const { selectedKeys, declWay } = this.state;
    dispatch({
      type: 'addempaccu/getDeclList',
      payload: {
        addDetIds: selectedKeys,
        ...copyAll,
        declWay,
        // pagerArg: {
        //   currentPage,
        //   pageSize,
        // },
      },
    }).then(() => {
      this.setState({
        decExcelVisible: true,
      });
    });
  };

  downSingleClick = values => {
    const {
      addempaccu: { downParam },
    } = this.props;
    const { accuDeclExportId } = values;
    downloadFile(
      {
        ...downParam,
        accuDeclExportId,
      },
      '/osApi/accuAddDet/accuAddDeclDetSingleExport',
      'POST'
    );
  };

  onDeclareCancel = () => {
    this.setState({
      decExcelVisible: false,
    });
  };

  onDeclareOk = () => {
    const {
      addempaccu: { downParam },
    } = this.props;
    downloadFile(downParam, '/osApi/accuAddDet/downloadDeclDetAccuAddImport', 'POST');
    this.setState({
      decExcelVisible: false,
    });
  };

  showDownLoadDeclErr = (count, list) => {
    const cannotDecList = list.map(item => ({
      serialNum: item.serialNum,
      certNo: item.certNo,
      empName: item.addDetName,
      custSerRespId: item.custSerRespId,
      creId: item.creId,
      cause: item.cause,
    }));
    const obj = {
      cannotDecList,
    };
    Modal.warning({
      content: (
        <Row>
          <Row>
            当前存在<span className="emphasize-text">{count}条</span>数据不可申报，请下载查看。
          </Row>
          <a onClick={() => this.download('/osApi/accuAddDet/accuDeclErrDataTemplate', obj)}>
            下载
          </a>
        </Row>
      ),
      okText: '关闭',
      okType: 'default',
      autoFocusButton: 'cancel',
    });
  };

  // 重置查询条件并获取列表
  async resetAndGeLlist(location) {
    const activeKey = '1';
    const { queryParam } = location;
    await this.resetSearch();
    await this.getList(location.query.activeKey || activeKey, undefined, undefined, queryParam);
    const { dispatch } = this.props;
    dispatch({
      type: 'addempaccu/updateModelData',
      payload: { expandForm: Boolean(queryParam) },
    });
    dispatch({
      type: 'global/changeIsMenuLink',
      payload: location,
    });
  }

  render() {
    const {
      addempaccu: {
        tabList,
        payWayList,
        curMthDeclFlagList,
        matStateList,
        pageData,
        activeKey,
        formFieldsValue,
        expandForm,
        defaultLibrary,
        declData,
        result,
        textR,
        progressPercent,
        showProgress,
        tag,
        proFormFieldsValue,
      },
      loading,
      addaccubatch,
    } = this.props;
    const {
      fetching,
      remarkVisible,
      visible2,
      proVisible,
      decExcelVisible,
      declInParam,
      selectedRows,
      selectedKeys,
      mode,
      accoOwnerFlag,
    } = this.state;
    const {
      form: { getFieldDecorator },
      bigwareList,
      listLoading,
    } = this.props;

    // 待申报
    const columns = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', minWidth: 80, maxWidth: 120 } }),
        render: text => <span>{text}</span>,
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({ style: { minWidth: 130, wordBreak: 'break-all', textAlign: 'center' } }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
      },
      {
        title: '执行地区',
        width: 95,
        dataIndex: 'declAreaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '执行账户',
        dataIndex: 'accuAccoName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD') : '--'),
      },
      {
        title: '所属客服',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '网报反馈',
        dataIndex: 'exexFdbk',
        className: Number(activeKey) === 4 ? styles.show : styles.hide,
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => (
          <Tooltip title={text}>
            <span
              style={{
                display: 'inline-block',
                width: 140,
                textOverflow: 'ellipsis',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
              }}
            >
              {text || '--'}
            </span>
          </Tooltip>
        ),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        render: text =>
          text ? (
            <span style={{ minWidth: 60 }}>{moment(text).format('YYYY-MM-DD HH:mm')}</span>
          ) : (
            '--'
          ),
      },
      {
        title: '操作',
        dataIndex: 'n11',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            width: 150,
            textAlign: 'center',
          },
        }),
        render: (text, record) => (
          <div>
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.linkRoute(record.addDetId, 'detail')}
            >
              查看
            </span>
            <Divider type="vertical" />
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.addRemark(record)}
            >
              办理备注
            </span>
          </div>
        ),
      },
    ];
    // 申报中
    const columns2 = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', minWidth: 80, maxWidth: 120 } }),
        render: text => <span>{text}</span>,
      },
      {
        title: '证件号',
        onCell: () => ({ style: { minWidth: 130, wordBreak: 'break-all', textAlign: 'center' } }),
        dataIndex: 'certNo',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
      },
      {
        title: '执行地区',
        width: 95,
        dataIndex: 'declAreaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '执行账户',
        dataIndex: 'accuAccoName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD') : '--'),
      },

      {
        title: '所属客服',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },

      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        dataIndex: 'n11',
        width: 150,
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            width: 150,
            textAlign: 'center',
          },
        }),
        render: (text, record) => (
          <div>
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.linkRoute(record.addDetId, 'detail')}
            >
              查看
            </span>
            <Divider type="vertical" />
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.addRemark(record)}
            >
              办理备注
            </span>
          </div>
        ),
      },
    ];
    // 已申报
    const columns3 = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', minWidth: 80, maxWidth: 120 } }),
        render: text => <span>{text}</span>,
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
      },
      {
        title: '执行地区',
        width: 95,
        dataIndex: 'declAreaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '执行账户',
        dataIndex: 'accuAccoName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD') : '--'),
      },
      {
        title: '所属客服',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        dataIndex: 'n11',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            width: 150,
            textAlign: 'center',
          },
        }),
        render: (text, record) => (
          <div>
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.linkRoute(record.addDetId, 'detail')}
            >
              查看
            </span>
            <Divider type="vertical" />
            <a onClick={() => this.addRemark(record)}>办理备注</a>
          </div>
        ),
      },
    ];
    const columns4 = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', minWidth: 80, maxWidth: 120 } }),
        render: text => <span>{text}</span>,
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({ style: { minWidth: 130, wordBreak: 'break-all', textAlign: 'center' } }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
      },
      {
        title: '执行地区',
        width: 95,
        dataIndex: 'declAreaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '执行账户',
        dataIndex: 'accuAccoName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD') : '--'),
      },
      {
        title: '所属客服',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '网报反馈',
        dataIndex: 'exexFdbk',
        className: Number(activeKey) === 4 ? styles.show : styles.hide,
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => (
          <Tooltip title={text}>
            <span
              style={{
                display: 'inline-block',
                width: 140,
                textOverflow: 'ellipsis',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
              }}
            >
              {text || '--'}
            </span>
          </Tooltip>
        ),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        render: text =>
          text ? (
            <span style={{ minWidth: 60 }}>{moment(text).format('YYYY-MM-DD HH:mm')}</span>
          ) : (
            '--'
          ),
      },
      {
        title: '操作',
        dataIndex: 'n11',
        width: 150,
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            width: 150,
            textAlign: 'center',
          },
        }),
        render: (text, record) => (
          <div>
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.linkRoute(record.addDetId, 'detail')}
            >
              查看
            </span>
            <Divider type="vertical" />
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.addRemark(record)}
            >
              办理备注
            </span>
          </div>
        ),
      },
    ];
    // 查看
    const columns6 = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', minWidth: 80, maxWidth: 120 } }),
        render: text => <span>{text}</span>,
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({ style: { minWidth: 130, wordBreak: 'break-all', textAlign: 'center' } }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
      },
      {
        title: '执行地区',
        width: 95,
        dataIndex: 'declAreaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '执行账户',
        dataIndex: 'accuAccoName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: text => text || '--',
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD') : '--'),
      },
      {
        title: '所属客服',
        dataIndex: 'creName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        dataIndex: 'n11',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            width: 150,
            textAlign: 'center',
          },
        }),
        render: (text, record) => (
          <div>
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.linkRoute(record.addDetId, 'detail')}
            >
              查看
            </span>
          </div>
        ),
      },
    ];

    const declareMenu = (
      <Menu>
        {checkPermissions('os:accuAddDet:accuAddImport') && (
          <Menu.Item>
            <span onClick={this.goProgress}>申报结果导入</span>
          </Menu.Item>
        )}
        {checkPermissions('os:accuAddDet:completeDecl') && (
          <Menu.Item>
            <span onClick={this.handleOkSuc}>标记申报成功</span>
          </Menu.Item>
        )}
        {/* {checkPermissions('os:accuAddDet:declFail') && (
          <Menu.Item>
            <span onClick={this.handleOkFail}>标记申报失败</span>
          </Menu.Item>
        )} */}
      </Menu>
    );

    // 申报中更多（取消申报，材料下载，申报明细表导出）
    const ingMore = (
      <Menu>
        {checkPermissions('os:accuAddDet:cancelDecl') && (
          <Menu.Item>
            <span onClick={this.cancleApply}>取消申报</span>
          </Menu.Item>
        )}
        {checkPermissions('os:accuAddDet:downloadMatsZip') && (
          <Menu.Item>
            <span onClick={this.materialDownload}>材料下载</span>
          </Menu.Item>
        )}

        {checkPermissions('os:accuAddDet:downloadDeclDetAccuAddImport') && (
          <Menu.Item>
            <span onClick={this.declareExport}>申报明细表导出</span>
          </Menu.Item>
        )}
        {checkPermissions('os:accuAddDet:batchUpdAccuAddDet') && (
          <Menu.Item>
            <span onClick={this.batchModify}>批量修改</span>
          </Menu.Item>
        )}
        <Menu.Item>
          <span onClick={this.exportData}>导出</span>
        </Menu.Item>
      </Menu>
    );
    // 取消申报更多（标记问题人员，材料下载，申报明细表导出）
    const cancleMore = (
      <Menu>
        {checkPermissions('os:accuAddProb:addProb') && (
          <Menu.Item>
            <span onClick={this.signPro}>标记问题人员</span>
          </Menu.Item>
        )}
        {/* {checkPermissions('os:accuAddDet:downloadMatsZip') && (
          <Menu.Item>
            <span onClick={this.materialDownload}>材料下载</span>
          </Menu.Item>
        )}

        {checkPermissions('os:accuAddDet:downloadDeclDetAccuAddImport') && (
          <Menu.Item>
            <span onClick={this.declareExport}>申报明细表导出</span>
          </Menu.Item>
        )} */}
        {checkPermissions('os:accuAddDet:batchUpdAccuAddDet') && (
          <Menu.Item>
            <span onClick={this.batchModify}>批量修改</span>
          </Menu.Item>
        )}
      </Menu>
    );
    const delMore = (
      <Menu>
        {checkPermissions('os:accuAddProb:addProb') && (
          <Menu.Item>
            <span onClick={this.signPro}>标记问题人员</span>
          </Menu.Item>
        )}
        {checkPermissions('os:accuAddDet:batchUpdAccuAddDet') && (
          <Menu.Item>
            <span onClick={this.batchModify}>批量修改</span>
          </Menu.Item>
        )}
        <Menu.Item
          onClick={() => router.push(`/providentfundmanagement/accurecruition/batchDeclaration`)}
        >
          <span>批量标记申报中</span>
        </Menu.Item>
        <Menu.Item onClick={this.exportData}>
          <span>导出</span>
        </Menu.Item>
      </Menu>
    );
    const curMthDeclFlagOption = curMthDeclFlagList.map(email => (
      <Option key={email.itemCode}>{email.itemName}</Option>
    ));
    const formItemLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };
    const formItemLayoutState = {
      labelCol: { md: { span: 8 } },
      wrapperCol: { md: { span: 16 } },
    };
    const tabPane1 = (
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div>
            <Authorized authority="os:accuAddDet:onLineDecl" noMatch={null}>
              <Button type="primary" onClick={this.onLineDecl} style={{ marginRight: 8 }}>
                网上申报
              </Button>
            </Authorized>
            <Authorized authority="os:accuAddDet:underLineDecl" noMatch={null}>
              <Button style={{ marginRight: 8 }} onClick={this.showConfirm}>
                线下申报
              </Button>
            </Authorized>
            <Dropdown overlay={delMore}>
              <Button>
                更多 <DownOutlined />
              </Button>
            </Dropdown>
          </div>
          <div style={{ width: 201 }} className={styles.tabSelect}>
            <Form>
              <FormItem {...formItemLayoutState} label="状态">
                {getFieldDecorator('curMthDeclFlag', {
                  rules: [{ required: false }],
                  initialValue: formFieldsValue.curMthDeclFlag || '1',
                })(
                  <HOCSelect style={{ width: 140 }} onChange={this.onFlagcurMth}>
                    {curMthDeclFlagOption}
                  </HOCSelect>
                )}
              </FormItem>
            </Form>
          </div>
        </div>
        {defaultLibrary ? (
          <Alert
            message="业务范围维护的地区增加了政策组，请先维护该地区的政策组默认大库后再申报。"
            type="warning"
            showIcon
          />
        ) : null}
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedKeys}
          loading={loading}
          data={pageData}
          columns={columns}
          rowKey="addDetId"
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane2 = (
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div>
            <Row>
              <Dropdown overlay={declareMenu}>
                <Button type="primary" style={{ marginRight: 8 }}>
                  申报完成
                </Button>
              </Dropdown>
              <Authorized authority="os:accuAddProb:addProb" noMatch={null}>
                <Button style={{ marginRight: 8 }} onClick={this.signPro}>
                  标记问题人员
                </Button>
              </Authorized>

              <Dropdown overlay={ingMore}>
                <Button>
                  更多 <DownOutlined />
                </Button>
              </Dropdown>
            </Row>
          </div>
          <div className={styles.tabSelect}>
            <Form>
              <FormItem {...formItemLayoutState} label="申报状态">
                {getFieldDecorator('declWay', {
                  rules: [{ required: false }],
                  initialValue: formFieldsValue.declWay || '0',
                })(
                  <Select style={{ width: 136 }} onChange={this.onExecState}>
                    <Option value="0">全部</Option>
                    <Option value="1">网上申报</Option>
                    <Option value="2">线下申报</Option>
                  </Select>
                )}
              </FormItem>
            </Form>
          </div>
        </div>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedKeys}
          loading={loading}
          data={pageData}
          columns={columns2}
          rowKey="addDetId"
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );

    const tabPane3 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Authorized authority="os:accuAddDet:cancelDeclButShow" noMatch={null}>
            <Button type="primary" style={{ marginRight: 8 }} onClick={this.cancleApply}>
              取消申报
            </Button>
          </Authorized>
          <Authorized authority="" noMatch={null}>
            <Button style={{ marginRight: 8 }} onClick={this.exportData}>
              导出
            </Button>
          </Authorized>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedKeys}
          loading={loading}
          data={pageData}
          columns={columns3}
          rowKey="addDetId"
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane4 = (
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
          <div>
            <Authorized authority="os:accuAddDet:onLineDecl" noMatch={null}>
              <Button type="primary" onClick={this.onLineDecl} style={{ marginRight: 8 }}>
                网上申报
              </Button>
            </Authorized>
            <Authorized authority="os:accuAddDet:underLineDecl" noMatch={null}>
              <Button style={{ marginRight: 8 }} onClick={this.showConfirm}>
                线下申报
              </Button>
            </Authorized>

            <Dropdown overlay={cancleMore}>
              <Button type="">
                更多
                <DownOutlined />
              </Button>
            </Dropdown>
          </div>
        </div>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedKeys}
          loading={loading}
          data={pageData}
          columns={columns4}
          rowKey="addDetId"
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );

    const tabPane5 = (
      <div>
        <div>
          <Row style={{ marginBottom: 16 }}>
            <Authorized authority="os:accuAddProb:addProbFdbk" noMatch={null}>
              <Button type="primary" onClick={this.batchFeedback} style={{ marginRight: 8 }}>
                批量反馈
              </Button>
            </Authorized>
            <Authorized authority="os:accuAddDet:exportAccuAdd" noMatch={null}>
              <ProExportBtn selectedRowKeys={selectedKeys} downloadParams={proFormFieldsValue} />
            </Authorized>
          </Row>
        </div>
        <ProTable
          onRef={e => {
            this.setState({ proTable: e });
          }}
          selectedRows={selectedRows}
          selectedRowKeys={selectedKeys}
          onSelectRow={this.handleSelectRows}
          proUrl="/providentfundmanagement/accurecruition/problem"
          busiType="16"
        />
      </div>
    );

    const tabPane6 = (
      <div>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedKeys}
          loading={loading}
          data={pageData}
          columns={columns6}
          rowKey="addDetId"
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPaneTem = ['', tabPane1, tabPane2, tabPane3, tabPane4, tabPane5, tabPane6];
    const children = result.map(email => <Option key={email.areaId}>{email.areaName}</Option>);

    const renderSimpleForm = (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="客户名称">
              {getFieldDecorator('custId', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.custId,
              })(<Customer attr allowClear showSearch optionFilterProp="children" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="执行地">
              {getFieldDecorator('declAreaId', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.declAreaId,
              })(
                <HOCSelect
                  // labelInValue
                  filterOption={false}
                  onSearch={this.changeArea}
                  onSelect={this.changeAreacode}
                  notFoundContent={fetching ? <Spin size="small" /> : null}
                  style={{ width: '100%' }}
                  placeholder="请输入"
                  allowClear
                  showSearch
                  optionFilterProp="children"
                >
                  {children}
                </HOCSelect>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" onClick={() => this.getList(activeKey)}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
    const renderAdvancedForm = (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="客户名称">
              {getFieldDecorator('custId', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.custId,
              })(<Customer attr allowClear showSearch optionFilterProp="children" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="执行地">
              {getFieldDecorator('declAreaId', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.declAreaId,
              })(
                <HOCSelect
                  // labelInValue
                  filterOption={false}
                  showSearch
                  onSearch={this.changeArea}
                  onSelect={this.changeAreacode}
                  notFoundContent={fetching ? <Spin size="small" /> : null}
                  style={{ width: '100%' }}
                  placeholder="请输入"
                  allowClear
                  optionFilterProp="children"
                >
                  {children}
                </HOCSelect>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="所属客服">
              {/* {getFieldDecorator('custSerRespName', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.custSerRespName,
              })(<Input placeholder="请输入" />)} */}
              {getFieldDecorator('creId', {
                initialValue: formFieldsValue.creId,
              })(
                <SearchPersonEs
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="业务开始日期">
              {getFieldDecorator('timeDate', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.timeDate,
              })(
                <RangePicker
                  placeholder={['开始日期', '结束日期']}
                  onChange={this.onTimeChange}
                  format="YYYY-MM-01"
                  mode={mode}
                  onPanelChange={this.onTimeChanges}
                  style={{ width: '100%' }}
                />
              )}
            </FormItem>
          </Col>

          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="姓名">
              {getFieldDecorator('empName', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.empName,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="证件号">
              {getFieldDecorator('certNo', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.certNo,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="材料提交状态">
              {getFieldDecorator('matState', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.matState,
              })(
                <HOCSelect placeholder="请选择" allowClear showSearch optionFilterProp="children">
                  {matStateList.map(value => (
                    <Option value={value.itemCode} key={value.itemCode}>
                      {value.itemName}
                    </Option>
                  ))}
                </HOCSelect>
              )}
            </FormItem>
          </Col>

          <Col md={8} sm={24}>
            <FormItem {...formItemLayout} label="缴费方式">
              {getFieldDecorator('payWay', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.payWay,
              })(
                <HOCSelect placeholder="请选择" allowClear showSearch optionFilterProp="children">
                  {payWayList.length &&
                    payWayList.map(value => (
                      <Option value={value.itemCode} key={value.itemCode}>
                        {value.itemName}
                      </Option>
                    ))}
                </HOCSelect>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            {/* <FormItem {...formItemLayout} label="执行账户">
              {getFieldDecorator('accuAccoName', {
                rules: [{ required: false }],
                initialValue: formFieldsValue.accuAccoName,
              })(<Input placeholder="请输入" />)}
            </FormItem> */}
            <FormItem label="执行账户" {...formItemLayout}>
              {getFieldDecorator('accuAccoId', {
                initialValue: formFieldsValue.accuAccoId,
              })(
                <BigwareList
                  placeholder="请输入"
                  onSearch={this.onSearch}
                  bigwareList={bigwareList}
                  loading={listLoading}
                />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="操作时间" {...formItemLayout}>
              {getFieldDecorator('operTime', {
                initialValue: formFieldsValue.operTime,
              })(<RangePicker style={{ width: '100%' }} />)}
            </FormItem>
          </Col>
          {accoOwnerFlag && (
            <Col md={8} sm={24}>
              <FormItem label="账户负责人" {...formItemLayout}>
                {getFieldDecorator('accoRespId', {
                  initialValue: formFieldsValue.accoRespId,
                })(
                  <SearchAccoListOs
                    allowClear
                    showSearch
                    filterOption={(input, option) =>
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                  />
                )}
              </FormItem>
            </Col>
          )}
          <Col md={8} sm={24} offset={!accoOwnerFlag ? 8 : 0}>
            <div style={{ overflow: 'hidden' }}>
              <div style={{ float: 'right', marginBottom: 24 }}>
                <Button type="primary" onClick={() => this.getList(activeKey)}>
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                  收起 <UpOutlined />
                </a>
              </div>
            </div>
          </Col>
        </Row>
      </Form>
    );
    const renderForm = expandForm ? renderAdvancedForm : renderSimpleForm;
    return (
      <div>
        <PageHeaderWrapper>
          <Card className={styles.searchCard}>
            <div className={styles.tableListForm}>{renderForm}</div>
          </Card>
          <Card className={styles.tabCard}>
            <div className={styles.tableList}>
              <Tabs activeKey={activeKey} onChange={this.tabChange}>
                {tabList.map(pane => (
                  <TabPane tab={pane.itemName} key={pane.itemCode}>
                    {tabPaneTem[pane.itemCode]}
                  </TabPane>
                ))}
              </Tabs>
            </div>
          </Card>
          {/* 办理备注   */}
          <Modal
            title="办理备注"
            visible={remarkVisible}
            onOk={this.remarkOk}
            onCancel={this.remarkCancel}
          >
            <Form style={{ lineHeight: '40px' }}>
              <FormItem>
                <Row>
                  <Col span={6}>运行备注详情 :</Col>
                </Row>
                <Row>
                  <Col span={20}>
                    <Row>
                      <TextArea
                        placeholder="请输入..."
                        value={textR}
                        onChange={this.textChangeR}
                        autoSize={{ minRows: 3, maxRows: 6 }}
                      />
                    </Row>
                  </Col>
                </Row>
              </FormItem>
            </Form>
          </Modal>
          {/* 结果导入  */}
          <Modal
            title="申报结果导入"
            visible={visible2}
            onOk={this.handleOk2}
            onCancel={this.handleCancel2}
          >
            <div style={{ textAlign: 'center' }}>
              <Button type="primary">模板下载</Button>
              <Button type="primary" style={{ marginLeft: 30 }}>
                导入
              </Button>
            </div>
          </Modal>
          <Modal
            title={tag === 'online' ? '网上申报' : '线下申报'}
            footer={null}
            closable={false}
            visible={showProgress}
          >
            <div style={{ textAlign: 'center' }}>
              <div>
                <Progress
                  percent={progressPercent}
                  format={percent => `${percent}%`}
                  style={{ paddingRight: 24, marginBottom: 20 }}
                />
              </div>
            </div>
          </Modal>
          {proVisible && (
            <ProModal
              selectedRows={selectedRows}
              selectedRowKeys={selectedKeys}
              busiType="16"
              onOk={this.proHandleOk}
              onCancel={this.handleCancelPro}
              isProType
              isAlertObj
            />
          )}
          <DeclareModal
            visible={decExcelVisible}
            inParam={declInParam}
            dataSource={declData}
            tableLoading={loading}
            downSingleClick={this.downSingleClick}
            onCancel={this.onDeclareCancel}
            pageChange={this.pageChange}
            pageSizeChange={this.pageSizeChange}
            onOk={this.onDeclareOk}
            declExportId="accuDeclExportId"
            accoName="accuAccoName"
            downLoadDeclErr={this.download}
          />
          <BatchTaskProgress
            progressVisible={addaccubatch.showProgress}
            progressPercent={addaccubatch.progressPercent || 0}
            isShowResult={addaccubatch.progressPercent === 100}
            resultInfo={addaccubatch.resultInfo}
            handleProgressModalVisible={this.handleProgressModalVisible}
            maskClosable={false}
          />
        </PageHeaderWrapper>
      </div>
    );
  }
}

export default AddEmpAccuList;
